<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <title>top</title>
        <style>
        	body,
       		div {
            margin: 0;
            padding: 0;
        	}
        	.page-gulp{

        		width:100%;
        		height:100%;
        	}
        	.page{
        		height:400px;
        	}
        	.page2{
        		height:200px;
        		
        	}
        .foot-tab{position:fixed;bottom:0; height:50px; width:100%; z-index: 9999;background:orange; text-align: center; padding-top:4px;}
		.foot-tab a{display:block;width:25%; float:left;}
		.foot-tab .foot-item .icon{ 
			display: block;
			width:30px; height:30px; 
			margin-left:auto; 
			margin-right:auto;
		}
        </style>
    </head>

    <body>
    	<div class="page-gulp">
	       <div class="page2">
	            <div class="wrap">
	            	<input type="text">1
	            </div>
	        </div>
	        <div class="page2">
	            <div class="wrap">
	            	<input type="text">2
	            </div>
	        </div>
	        <div class="page2">
	            <div class="wrap">
	            	<input type="text">3
	            </div>
	        </div>
	        <div class="page2">
	            <div class="wrap">
	            	<input type="text">4
	            </div>
	        </div>
	        <div class="page2">
	            <div class="wrap">
	            	<input type="text">5
	            </div>
	        </div>
	        <div class="page2">
	            <div class="wrap">
	            	<input type="text">6
	            </div>
	        </div>
	        <div class="page2">
	            <div class="wrap">
	            	<input type="text">7
	            </div>
	        </div>
	        <footer>
	        	<div class="foot-tab">
				    <a href="#" class="foot-item"><i class="icon"></i>首页</a>
				    <a href="#" class="foot-item"><i class="icon"></i>我的书本</a>
				    <a href="#" class="foot-item"><i class="icon"></i>我的伙伴</a>
				    <a href="#" class="foot-item"><i class="icon"></i>个人中心</a>
				</div>
	        </footer>
        </div>
    </body>
  <script>
  
  	var h = document.documentElement.clientHeight;
    window.onresize = function(){
        if (document.documentElement.clientHeight < h-100) {
            document.getElementsByTagName("footer")[0].style.display = "none";
        }else{
            document.getElementsByTagName("footer")[0].style.display = "block";
        }
    };
  </script>
</html>